<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <title>Demo</title>
    <meta name="description" content=""/>
    <meta name="viewport" content="width=device-width"/>
    <base href="/"/>
<!--    <link rel="stylesheet" type="text/css" href="/webjars/bootstrap/css/bootstrap.min.css"/>-->
    <link rel="stylesheet" type="text/css" href="assets/webuploader/webuploader.css"/>
    <script type="text/javascript" src="assets/jquery/jquery-2.2.2.min.js"></script>
<!--    <script type="text/javascript" src="/webjars/bootstrap/js/bootstrap.min.js"></script>-->
    <script type="text/javascript" src="assets/webuploader/webuploader.js"></script>
</head>
<body>
<h1>Demo</h1>
<div class="container">
    <div><span>图片</span><!-- <em>*</em> --></div>
        <div class="photoBox clearfix">
            <div class="docmt" id="uploadPictures">上传图片</div>
        </div>
<!--    <div class="imgBox clearfix" id="pictureList">-->
<!--    </div>-->
    <p><em style="color: #f00">*</em>支持jpg、png、jpeg、bmp、gif，最大不超过500k，不超过5张</p>
</div>
</body>
<script type="text/javascript">
    function createWebUploader(multiple,pick,accept,fileNumLimit,fileSingleSizeLimit,uploadSuccessCallback,beforeFileQueuedCallback){
        if(fileNumLimit == -1 || !fileNumLimit){
            fileNumLimit = undefined;
        }
        WebUploader.create({
            // 选完文件后，是否自动上传。
            auto: true,
            //是否开起同时选择多个文件能力
            multiple:multiple,
            //允许文件重复
            duplicate:true,
            // swf文件路径
            swf:  'assets/webuploader/Uploader.swf',
            // 文件接收服务端。
            server:  '/file/uploadByServletFileUpload',
            // 选择文件的按钮。可选。
            // 内部根据当前运行是创建，可能是input元素，也可能是flash.
            pick: pick,
            // 只允许选择图片文件。
            accept: accept,
            fileNumLimit:fileNumLimit,
            fileSingleSizeLimit:fileSingleSizeLimit*1024,
            onBeforeFileQueued:function(file){
                // if(typeof beforeFileQueuedCallback == "function"){
                //     var object = beforeFileQueuedCallback();
                //     var number = object.initNumber + object.successNumber;
                //     if(number >= fileNumLimit){
                //         alert('最多只能上传'+fileNumLimit+'个文件！');
                //         return false;
                //     }
                // }
            },
            //当某个文件的分块在发送前触发，主要用来询问是否要添加附带参数，大文件在开起分片上传的前提下此事件可能会触发多次
            onUploadBeforeSend:function(object ,data ,headers){
            },
            //设置文件上传域的name
            fileVal:'file',
            method:'POST',
            onStartUpload:function(){
                //某个文件开始上传前触发，一个文件只会触发一次
                // if(typeof beforeFileQueuedCallback == "function"){
                //     var object = beforeFileQueuedCallback();
                //     var status = this.getStats();
                //     var progressNumer = status.progressNum;//上传中的文件数
                //     var queueNumber = status.queueNum;//还在队列中的文件数
                //     var number = object.initNumber + object.successNumber + progressNumer + queueNumber;
                //     if(number > fileNumLimit){
                //         showTip('最多只能上传'+fileNumLimit+'个文件！');
                //         this.stop();//停止上传
                //         this.reset();//重置
                //     }
                // }
            },
            //开始上传时触发
            onUploadStart:function(file){

            },
            onUploadProgress:function(file,percentage){
                //上传过程中触发，携带上传进度
            },
            onUploadSuccess:function(file,response){
                //当文件上传成功时触发
                uploadSuccessCallback&&uploadSuccessCallback(response,file,this);
            },
            onUploadError:function(file,reason){
                //当文件上传出错时触发
            },
            onError:function(type){
                switch(type){
                    case 'Q_EXCEED_NUM_LIMIT':
                        //在设置了fileNumLimit且尝试给uploader添加的文件数量超出这个值时派送
                        alert('最多只能上传'+fileNumLimit+'个文件！');
                        break;
                    case 'Q_EXCEED_SIZE_LIMIT':
                        //在设置了Q_EXCEED_SIZE_LIMIT且尝试给uploader添加的文件总大小超出这个值时派送
                        alert('文件总大小超出限制！');
                        break;
                    case 'Q_TYPE_DENIED':
                        //当文件类型不满足时触发
                        alert('文件类型不符合要求！');
                        break;
                    case 'F_EXCEED_SIZE':
                        alert('文件大小超出限制！');
                        break;
                }
            }
        });
    }

    createWebUploader(true,'#uploadPictures',{
        title: 'Images',
        extensions: 'gif,jpg,jpeg,bmp,png',
        mimeTypes: 'image/gif,image/jpg,image/jpeg,image/bmp,image/png'
    },5 ,500 * 1024,function(result,file,plugin){
        /**
        //  * 回调
        //  */
        // if(result&&result.code == 'ok'){
        //     var data = result.data;
        //     var html = "<div data-queueFile='"+file.id+"' data-fileId='"+data.id+"'><div class='close'>×</div><img src='"+data.url+"'></div>";
        //     $('#pictureList').append(html);
        //     $('#pictureList .close').unbind("click");
        //     $('#pictureList .close').click(function(e){
        //         var $parent =  $(this).parent();
        //         var queueFileId = $(this).parent().attr("data-queueFile");
        //         $parent.remove();
        //         if(queueFileId){
        //             var uploadedFiles = plugin.getFiles("complete");
        //             for(var i = 0;i < uploadedFiles.length;i++){
        //                 if(uploadedFiles[i].id == queueFileId){
        //                     plugin.removeFile(uploadedFiles[i],true);
        //                     break;
        //                 }
        //             }
        //         }
        //     });
        // }
    },function(){
        //返回不带有data-queueFile的文件个数
        return  {
            initNumber:$("#pictureList > div:not([data-queueFile])").length,
            successNumber:$("#pictureList > div[data-queueFile]").length
        };
    });
</script>
</html>